<template>
    <div>
    <el-button type="primary" @click="addReactiveAddNumber">
        <a>{{form.name}}</a>{{form.age}}
    </el-button>
    </div>
    <el-button type="success" @click="$router.push('/login')">返回登入界面</el-button>
    <div>
    <el-button @click="setCookie1">
        <a>设置cookie</a>
    </el-button>
    </div>
    <div>
    <el-button @click="getCookie1">
        <a>获取cookie</a>
    </el-button>
    </div>
    <div>
    <el-button @click="open">
        <a>删除cookie(退出登录)</a>
    </el-button>
    </div>
    <div>
      {{$store.state.user}}
    </div>
  </template>
  
  <script setup>
//  import HelloWord from '~/components/HelloWorld.vue'
// ref和reactive都是用来创建响应式数据的，
//ref创建的是一个普通响应数据对象，reactive创建的是一个对象，对象中的属性是响应式的
  import { ref,reactive } from 'vue';
  // 引入cookie工具
  import { setCookie,getCookie,deleteCookie } from '~/api/util/auth';
  // 右上角小弹窗提示框
  import { ElNotification,ElMessage, ElMessageBox, notificationEmits } from 'element-plus';

  import { showModal }  from "~/api/util/notice";
  // 路由方法体
  import { useRouter } from 'vue-router';
  const router = useRouter();
  
  // 引入对象存储工具
  import { useStore } from 'vuex'
  const store = useStore();
  const form = reactive({
      age:0,
      name:'dmr'
  });
  function addReactiveAddNumber(){
    form.age++;
    console.log(form);
  }

  function setCookie1(){
    setCookie('dmr1234');
  }

  function getCookie1(){
    console.log(getCookie());
    ElNotification({
    message: '获取到的authority为:'+ getCookie(),
    type: 'success',
    duration: 2000
    })
  }

  const open = () => {
    showModal("是否退出登入").then(() => {
      // 点击confirmButtonText执行
        store.dispatch("loginOut")
        ElMessage({
        type: 'success',
        message: "退出登入成功!",
      })
    }).catch(() => {
      // 点击cancelButtonText执行
    })
}
  </script>
  <style scoped>
  
  </style>
  